<template>
  <div class="v-figure-style-five">
    <div class="title-content">
      <p class="module-name" v-if="moduleName">{{ moduleName }}</p>
      <span v-if="isShowMore" @click="toMore(link)">查看更多</span>
    </div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <van-image :src="item.imgUrl" fit="contain">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error>
            <!--             <img src=""/>-->
          </template>
        </van-image>
        <p class="user-name etc">{{ item.userName }}</p>
        <p class="title etc">{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import mixins from './../mixins'

export default {
  name: 'VFigureStyleFive',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {
        moduleName: '样式',
        isShowMore: true
      }
    }
  },
  data() {
    return {}
  },
  computed: {

    link() {
      return this.option.link || ''
    },
    isShowMore() {
      return this.option.isShowMore || false
    },
    moduleName() {
      return this.option.moduleName || ''
    },
    list() {
      return this.option.list || [
        {
          userName: '张三',
          imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          id: '1',
          title: '高级技师'
        },
        {
          userName: '李四',
          imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          id: '2',
          title: '高级技师'
        },
        {
          userName: '张三',
          imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          id: '1',
          title: '高级技师'
        },
        {
          userName: '李四',
          imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          id: '2',
          title: '高级技师'
        }
      ]
    }
  },
  created() {
    console.log(this.option, 'stylefive---created')
  },

}
</script>
<style lang="scss">
@import "@/styles/utility/rem.scss";
@import "~@/styles/mixin.scss";

.v-figure-style-five {
  position: relative;
  background-color: #fafafa;
  padding: 0 rem(20) rem(20);

  .title-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: rem(24);
    margin-top: rem(30);
    .module-name {
      color: #333;
      font-size: rem(30);
      font-weight: bold;
      max-width: rem(450);
    }

    > span {
      color: #999;
      font-size: rem(28);
    }
  }

  > ul {
    width: rem(710);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #fff;
    border-radius: rem(16);
    padding: rem(30) rem(30) 0;

    > li {
      border-radius: rem(16);
      width: rem(300);
      text-align: left;
      margin-bottom: rem(30);

      .van-image {
        width: rem(316);
        height: rem(442);
        border-radius: rem(12);

        .van-image__error,
        .van-image__loading {
          background-color: transparent;
        }

        img {
          border-radius: rem(12);
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .user-name {
        font-size: rem(30);
        color: #333;
        margin: rem(19) rem(0);
      }

      .title {
        font-size: rem(22);
        color: #666;
      }
    }
  }
}
</style>
